<!-- 商品详情 -->
<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app'
import { reactive, ref, computed } from 'vue'
// 引入选择商品 || 选择规格
import SelectSpec from './components/SelectSpec.vue';

import { getSpuDetailApi, getBasicRulesApi, getEvaluateListApi, getNowActivityDetailApi, settlementApi, AddCardApi } from '@/api/shop.js'
import { secondsUntilTargetTime, numberUnify } from '@/utils'
// 全局数据
const info = reactive({
  id: '',
  activityId: '',
  timeData: null,
  type: 0, // 0: 正常价格 1: 活动价格
  data: {},
  showDetailPopup: false,
  detailTitle: '',
  detailInfo: '',
  SelectSpecType: '1',
  showSelectSpec: false,
  skuList: [],
  evaluateList: [],
  evaluateNum: 0
})
// 首次加载
onLoad(options => {
  // console.log(options)
  info.type = options.type || 0
  info.activityId = options.activityId || ''
  info.id = options.id
  init()
  getEvaluateList()
})
// 页面显示
// onShow(() => {
// })
// 初始化
function init() {
  if (info.type == 1) {
    getNowActivityDetailApi({
      id: info.activityId
    })
      .then(activity => {
        const { products } = activity.data
        const endTime = new Date(activity.data.endTime)
        const timeStr = `${endTime.getHours() >= 10 ? endTime.getHours() : '0' + endTime.getHours()}:${endTime.getMilliseconds() >= 10 ? endTime.getMilliseconds() : '0' + endTime.getMilliseconds()}: ${endTime.getMinutes() >= 10 ? endTime.getMinutes() : '0' + endTime.getMinutes()}`
        // console.log('timeStr', timeStr)
        // 计算秒杀剩余时间
        info.timeData = secondsUntilTargetTime(timeStr)
        // 获取活动商品
        // 获取商品详情
        getSpuDetailApi({
          id: info.id
        }).then(res => {
          const detail = res.data
          detail.price = numberUnify(products[0].seckillPrice / 100)
          detail.marketPrice = numberUnify(detail.marketPrice / 100)
          detail.skus.forEach(sku => {
            // 匹配活动sku数据
            const actuvutyInfo = products.find(product => product.skuId == sku.id)
            sku.declinePrice = numberUnify((sku.marketPrice - actuvutyInfo.seckillPrice) / 100)
            sku.marketPrice = numberUnify(sku.marketPrice / 100)
            sku.price = numberUnify(actuvutyInfo.seckillPrice / 100)
            sku.stock = actuvutyInfo.stock
          });
          info.data = detail
          info.skuList = detail.skus
        })
      })
  } else {
    // 获取商品详情
    getSpuDetailApi({
      id: info.id
    }).then(res => {
      const detail = res.data
      detail.price = numberUnify(detail.price / 100)
      detail.marketPrice = numberUnify(detail.marketPrice / 100)
      detail.skus.forEach(sku => {
        sku.marketPrice = numberUnify(sku.marketPrice / 100)
        sku.price = numberUnify(sku.price / 100)
        sku.declinePrice = numberUnify((sku.marketPrice - sku.price) / 100)
      });
      info.data = detail
      info.skuList = detail.skus
    })
  }

}
// 获取商品关联评价列表
function getEvaluateList() {
  getEvaluateListApi({
    spuId: info.id,
    type: '0',
    pageNo: '1',
    pageSize: '10'
  }).then(res => {
    info.evaluateList = res.data.list || []
    info.evaluateNum = res.data.total
  })
}
// 倒计时数据  
const timeData = ref({});

// 实时数据  
const onChange = (e) => {
  timeData.value = e;
};
// 显示详情弹窗
function showDetailpopup(id) {
  if (id === '运费') {
    info.detailTitle = '运费详情'
    info.detailInfo = `免运费`
    info.showDetailPopup = true
    return
  }
  getBasicRulesApi({
    id
  })
    .then(res => {
      const data = res.data
      info.detailTitle = data.settingName
      info.detailInfo = data.settingContent
      info.showDetailPopup = true
    })
}
// 计算默认展示规格
const specInfo = computed(() => {
  if (!info.data.skus) return {}
  return info.data.skus[0]
})
// 拨打客服电话
function callCustomerService() {
  uni.makePhoneCall({
    phoneNumber: '114' //仅为示例
  }).catch(e => { })
}
// 显示规格弹窗
const showSelectSpec = type => {
  info.SelectSpecType = type
  info.showSelectSpec = true
}
// 规格弹窗立  || 加入购物车
function confirmSelectSpec(data) {
  if (info.SelectSpecType == '1') {
    // 模拟下单
    settlementApi({
      pointStatus: false,
      deliveryType: 1,
      seckillActivityId: info.activityId,
      "items[0].skuId": data.info.id,
      "items[0].count": data.num,
    })
      .then(res => {
        // 前往创建订单页面
        uni.navigateTo({
          url: '/subPackage/shop/createorder/index?info=' + JSON.stringify(res.data)
        })
      })

  } else {
    AddCardApi({
      skuId: data.info.id,
      count: data.num
    })
      .then(res => {
        // 模拟加入购物车
        uni.showToast({
          title: '已加入购物车',
          icon: 'none'
        })
      })
  }
  info.showSelectSpec = false
}
</script>

<template>
  <view class="detail-page">
    <!-- 轮播区域 -->
    <view class="swiper-box">
      <up-swiper v-if="info.data.sliderPicUrls" :list="info.data.sliderPicUrls" :radius="0" :height="`624rpx`"
        :indicator="true" indicatorMode="dot" indicatorInactiveColor="rgba(255, 255, 255, 0.2)"
        :autoplay="false"></up-swiper>
    </view>
    <!-- 商品价格区域 -->
    <view class="price-box">
      <!-- 正常价格 -->
      <view v-if="info.type == 0" class="price-block price-normal">
        <view class="bg">
          <image style="width: 750rpx;height: 88rpx;" src="/static/images/price_normal_bg.png" mode="scaleToFill" />
        </view>
        <view class="cnt">
          <view class="left">
            <view class="price-info">
              <view class="present-price">
                <text class="unit">¥</text>
                <text class="price">{{ info.data.price }}</text>
              </view>
              <view class="original-price">
                <text class="unit">¥</text>
                <text class="price">{{ info.data.marketPrice }}</text>
              </view>
            </view>
          </view>
          <view class="right">
            <text>已售出</text>
            <br />
            <text>{{ info.data.salesCount }}件</text>
          </view>
        </view>
      </view>
      <!-- 活动价格（限时抢购） -->
      <view v-else class="price-block price-activity">
        <view class="bg">
          <image style="width: 750rpx;height: 88rpx;" src="/static/images/price_activity_bg.png" mode="scaleToFill" />
        </view>
        <view class="cnt">
          <view class="left">
            <image style="width: 60rpx;height: 60rpx;" src="/static/images/icons/limit_title1.png" mode="scaleToFill" />
            <view class="price-info">
              <view class="present-price">
                <text class="unit">¥</text>
                <text class="price">{{ info.data.price }}</text>
              </view>
              <view class="original-price">
                <text class="unit">¥</text>
                <text class="price">{{ info.data.marketPrice }}</text>
              </view>
            </view>
          </view>
          <view class="right">
            <text>距活动结束时间</text>
            <up-count-down :time="info.timeData" format="HH:mm:ss" autoStart millisecond @change="onChange">
              <view class="time">
                <view class="time__custom">
                  <text class="time__custom__item">{{ timeData.hours > 9 ? timeData.hours : '0' + timeData.hours
                    }}</text>
                </view>
                <text class="time__doc">:</text>
                <view class="time__custom">
                  <text class="time__custom__item">{{ timeData.minutes > 9 ? timeData.minutes : '0' + timeData.minutes
                    }}</text>
                </view>
                <text class="time__doc">:</text>
                <view class="time__custom">
                  <text class="time__custom__item">{{ timeData.seconds > 9 ? timeData.seconds : '0' + timeData.seconds
                    }}</text>
                </view>
              </view>
            </up-count-down>
          </view>
        </view>
      </view>
    </view>
    <!-- 商品标题 -->
    <view class="title-box">
      <!-- 主标题 -->
      <view class="main-title-box">
        <text class="title">{{ info.data.name }}</text>
        <view v-if="false" class="tag">官方旗舰</view>
      </view>
      <!-- 副标题 -->
      <view class="sub-title-box">
        <text class="sub_title">{{ info.data.keyword }}</text>
      </view>
    </view>
    <!-- 分割线 -->
    <view class="line"></view>
    <!-- 其他 信息 -->
    <view class="other-info">
      <up-cell-group :border="false">
        <up-cell :isLink="true" :border="false" @click="showDetailpopup('运费')">
          <template #icon>
            <text class="label">运费</text>
          </template>
          <template #title>
            <view class="info freight">
              <text>免运费</text>
            </view>
          </template>
        </up-cell>
        <up-cell :isLink="true" :border="false" @click="showDetailpopup(3)">
          <template #icon>
            <text class="label">承诺</text>
          </template>
          <template #title>
            <view class="info promise">
              <view class="item">
                <up-icon name="checkmark-circle"></up-icon>
                <text>破损包退</text>
              </view>
              <view class="item">
                <up-icon name="checkmark-circle"></up-icon>
                <text>假一赔四</text>
              </view>
              <view class="item">
                <up-icon name="checkmark-circle"></up-icon>
                <text>退货运费险</text>
              </view>
            </view>
          </template>
        </up-cell>
        <up-cell :isLink="true" :border="false" @click="showDetailpopup(4)">
          <template #icon>
            <text class="label">参数</text>
          </template>
          <template #title>
            <view class="info parameter">
              <text class="up-line-1">产品产地：中国大陆，常温保存，保存环境常温保存，保存环境</text>
            </view>
          </template>
        </up-cell>
        <up-cell :isLink="true" :border="false" @click="showSelectSpec('1')">
          <template #icon>
            <text class="label">规格</text>
          </template>
          <template #title>
            <view class="info spec">
              <text class="up-line-1">{{ specInfo?.properties ? specInfo.properties[0].valueName : '' }}</text>
            </view>
          </template>
        </up-cell>
      </up-cell-group>
    </view>
    <!-- 分割线 -->
    <view class="line"></view>
    <!-- 商品评价 -->
    <view class="evaluate-box">
      <!-- title -->
      <up-cell-group :border="false">
        <up-cell :isLink="true" :border="false" :url="`/subPackage/shop/evaluatelist?id=${info.id}`">
          <template #icon>
            <text class="label">商品评价</text>
            <text v-if="info.evaluateNum > 0" class="num">({{ info.evaluateNum }})</text>
          </template>
        </up-cell>
      </up-cell-group>

      <!-- 空状态 -->
      <up-empty v-if="info.evaluateList.length <= 0" mode="data" text="暂无评价" marginTop="100rpx"></up-empty>
      <!-- 列表 -->
      <view v-else class="list">
        <up-cell v-for="(item, index) in info.evaluateList" :key="index">
          <template #icon>
            <up-avatar shape="circle" size="44" :src="item.userAvatar"></up-avatar>
          </template>
          <template #title>
            <view class="cnt">
              <view class="name">
                <text>{{ item.userNickname }}</text>
              </view>
              <view class="detail">
                <text>{{ item.content }}</text>
              </view>
            </view>
          </template>
        </up-cell>
      </view>
    </view>
    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="cnt">
        <view class="left">
          <view class="customer-service" @click="callCustomerService">
            <image style="width: 52rpx; height: 52rpx;" src="/static/images/icons/customer_service1.png"
              mode="scaleToFill" />
            <text>客服</text>
          </view>
          <view v-if="info.type != 1" class="shopping-cart" @click="showSelectSpec('2')">
            <image style="width: 52rpx; height: 52rpx;" src="/static/images/icons/shopping_cart.png"
              mode="scaleToFill" />
            <text>加入购物车</text>
          </view>
        </view>
        <u-button type="primary" size="large" @click="showSelectSpec('1')">立即购买</u-button>
      </view>
    </view>
    <!-- 弹窗-查看商品详情 -->
    <up-popup :show="info.showDetailPopup" :closeable="true" @close="info.showDetailPopup = false" :round="10">
      <view class="detail-popup-content">
        <view class="title">
          <text>{{ info.detailTitle }}</text>
        </view>
        <view class="cnt">

          <rich-text :nodes="info.detailInfo"></rich-text>
        </view>
        <view class="btn-box">
          <u-button type="primary" size="large" @click="info.showDetailPopup = false">确认</u-button>
        </view>
      </view>
    </up-popup>
    <!-- 加入购物车 || 选择规格 -->
    <SelectSpec :show="info.showSelectSpec" :type="info.SelectSpecType" :list="info.skuList"
      @close="info.showSelectSpec = false" @confirm="confirmSelectSpec" />
  </view>
</template>

<style lang="scss" scoped>
.detail-page {
  padding-bottom: 208rpx;

  & .line {
    margin-left: 30rpx;
    margin-top: 8rpx;
    width: 686rpx;
    height: 0rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    border: 1rpx solid #81818A;
    opacity: 0.2;
  }

  // 轮播
  & .swiper-box {
    position: relative;

    &::v-deep .u-swiper {
      & .u-swiper__indicator {
        bottom: 30rpx;

        & .u-swiper-indicator__wrapper__dot--active {
          width: 5px;
        }
      }
    }
  }

  // 商品价格区域
  & .price-box {
    & .price-block {
      position: relative;

      & .bg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 750rpx;
        height: 88rpx;
      }

      & .cnt {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 28rpx;
      }

      // 正常价格
      &.price-normal {
        & .cnt {
          & .left {
            display: flex;
            align-items: center;
            height: 88rpx;

            & .price-info {
              display: flex;
              align-items: flex-end;

              & .present-price {
                margin-left: 10rpx;

                & .unit {
                  font-weight: 500;
                  font-size: 32rpx;
                  color: #FFFFFF;
                }

                & .price {
                  font-weight: bold;
                  font-size: 52rpx;
                  color: #FFFFFF;
                }
              }

              & .original-price {
                margin-bottom: 6rpx;

                & .unit {
                  padding-left: 10rpx;
                  padding-right: 4rpx;
                  font-weight: 300;
                  font-size: 24rpx;
                  color: #90969E;
                }

                & .price {
                  font-weight: 300;
                  font-size: 24rpx;
                  color: #90969E;
                  text-decoration: line-through;
                }
              }
            }
          }

          & .right {
            font-weight: 400;
            font-size: 20rpx;
            color: #90969E;
            text-align: right;
          }
        }
      }

      // 活动价格
      &.price-activity {
        & .cnt {
          & .left {
            display: flex;
            align-items: center;

            &>image {
              margin-top: 4rpx;
            }

            & .price-info {
              display: flex;
              align-items: flex-end;

              & .present-price {
                margin-left: 10rpx;

                & .unit {
                  font-weight: 700;
                  font-size: 32rpx;
                  color: #36363A;
                }

                & .price {
                  font-weight: bold;
                  font-size: 52rpx;
                  color: #36363A;
                }
              }

              & .original-price {
                margin-bottom: 6rpx;

                & .unit {
                  padding-left: 10rpx;
                  font-weight: 300;
                  font-size: 24rpx;
                  color: #90969E;
                }

                & .price {
                  font-weight: 300;
                  font-size: 24rpx;
                  color: #90969E;
                  text-decoration: line-through;
                }
              }
            }
          }

          & .right {
            margin-top: -6rpx;
            text-align: center;

            &>text {
              font-weight: 400;
              font-size: 20rpx;
              color: #FFFFFF;
            }

            & .time {
              display: flex;
              align-items: center;

              &__custom {
                width: 32rpx;
                height: 32rpx;
                background-color: #FFE9C6;
                border-radius: 2rpx;
                /* #ifndef APP-NVUE */
                display: flex;
                /* #endif */
                justify-content: center;
                align-items: center;

                &__item {
                  font-weight: 500;
                  font-size: 20rpx;
                  color: #36363A;
                  text-align: center;
                }
              }

              &__doc {
                color: #FFFFFF;
                padding: 0px 10rpx;
              }
            }
          }
        }
      }
    }
  }

  // 商品标题
  & .title-box {
    padding: 32rpx 34rpx;

    // 主标题
    & .main-title-box {
      display: flex;
      align-items: center;

      & .title {
        font-weight: 500;
        font-size: 36rpx;
        color: #242532;
      }

      & .tag {
        margin-left: 14rpx;
        width: 116rpx;
        height: 32rpx;
        line-height: 32rpx;
        font-weight: 400;
        font-size: 20rpx;
        color: #242532;
        text-align: center;
        background: linear-gradient(142deg, #FFF0D7 0%, #FEDDAE 100%);
        border-radius: 2rpx 2rpx 2rpx 2rpx;
      }
    }

    // 副标题
    & .sub-title-box {
      margin-top: 16rpx;
      font-weight: 400;
      font-size: 20rpx;
      color: #81818A;
    }
  }

  // 其他信息
  & .other-info {
    & .label {
      font-weight: 400;
      font-size: 24rpx;
      color: #646464;
    }

    & .info {
      margin-left: 32rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #020403;

      // 承诺
      &.promise {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 486rpx;

        & .item {
          display: flex;
          align-items: center;

          &::v-deep .u-icon {
            margin-top: 4rpx;

            & text {
              font-size: 28rpx !important;
              line-height: 28rpx !important;
              color: #646464 !important;
            }
          }

          & text {
            padding-left: 10rpx;
          }
        }
      }

      // 参数
      &.parameter {
        width: 476rpx;
      }
    }
  }

  // 商品评价
  & .evaluate-box {

    & .label {
      font-weight: 500;
      font-size: 28rpx;
      color: #242532;
    }

    & .num {
      padding-left: 10rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #242532;
    }

    & .list {
      padding-bottom: 188rpx;

      &::v-deep .u-cell {
        &__body {
          padding: 20rpx 32rpx;

          &__content {
            align-items: flex-start;

            & .u-avatar {
              width: 88rpx !important;
              height: 88rpx !important;

              & image {
                width: 88rpx !important;
                height: 88rpx !important;
              }
            }

            & .cnt {
              margin-left: 16rpx;

              & .name {
                font-weight: 500;
                font-size: 28rpx;
                color: #404047;
              }

              & .detail {
                margin-top: 8rpx;
                font-weight: 400;
                font-size: 24rpx;
                color: #81818A;
              }
            }
          }
        }

        & .u-line {
          margin: 0 32rpx !important;
          width: calc(100vw - 64rpx) !important;
        }

        &:last-child {
          & .u-line {
            display: none;
          }
        }
      }
    }
  }

  // 底部操作栏
  & .bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;
    width: 750rpx;
    height: 176rpx;
    background: #FFFFFF;
    box-shadow: 0rpx -2rpx 12rpx 0rpx rgba(0, 0, 0, 0.07);

    & .cnt {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx 32rpx 70rpx 42rpx;

      & .left {
        display: flex;
        align-items: center;

        & .customer-service {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;

          & text {
            font-weight: 500;
            font-size: 18rpx;
            color: #5F5F67;
          }

        }

        & .shopping-cart {
          margin-left: 28rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;

          & text {
            font-weight: 500;
            font-size: 18rpx;
            color: #5F5F67;
          }
        }
      }

      &::v-deep .u-button {
        margin: 0;
        width: 440rpx;
        height: 76rpx;
        background: #FFA618;
        border: none;
        border-radius: 200rpx 200rpx 200rpx 200rpx;
      }
    }
  }

  // 弹窗--查看商品详情
  &::v-deep .u-popup {
    & .detail-popup-content {
      width: 100vw;

      & .title {
        margin-top: 40rpx;
        font-weight: 500;
        font-size: 36rpx;
        color: #303133;
        text-align: center;
      }

      & .cnt {
        padding: 56rpx 72rpx 134rpx 74rpx;
        width: 750rpx;
        box-sizing: border-box;

        & rich-text {
          font-weight: 400;
          font-size: 28rpx;
          color: #303133;
        }
      }

      & .btn-box {
        width: 750rpx;
        padding: 12rpx 44rpx 12rpx 46rpx;
        background: #FFFFFF;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
        border-top: 1rpx solid #E9E9EB;
        text-align: center;

        & .u-button {
          margin: 0;
          width: 660rpx;
          height: 88rpx;
          background: #FFA618;
          border: none;
          border-radius: 112rpx 112rpx 112rpx 112rpx;
        }
      }
    }
  }
}
</style>
